<template>
	<div>
		<el-row>
			<el-col :span="24">
				<div class="nav-title">
					<h4><img src="../assets/1.png">数字化系统</h4>
				</div>
				<el-menu default-active="company" router=true>
					<el-menu-item index="company">
						<span slot="title">企业首页</span>
					</el-menu-item>
					<el-menu-item index="group">
						<span slot="title">集团首页</span>
					</el-menu-item>
					<el-menu-item index="SafetyReport">
						<span slot="title">津港安全信息上报</span>
					</el-menu-item>
					<el-menu-item>
						<el-submenu>
							<template slot="title">企业安全生产...</template>
							<el-menu-item index="">安全生产委员会</el-menu-item>
							<el-menu-item index="">安全生产管理机构</el-menu-item>
							<el-menu-item index="">安全生产责任制考核</el-menu-item>
							<el-menu-item index="">三类人员</el-menu-item>
							<el-menu-item index="safeinput">安全生产投入管理</el-menu-item>
							<el-menu-item index="safeedu">安全教育培训管理</el-menu-item>
							<el-menu-item index="">重大危险源</el-menu-item>
							<el-menu-item index="">安全生产事故应急</el-menu-item>
							<el-menu-item index="">安全生产标准化</el-menu-item>
							<el-menu-item index="">安全文化示范企业</el-menu-item>
							<el-menu-item index="">
								事故管理
							</el-menu-item>
						</el-submenu>
					</el-menu-item>
					<el-menu-item index="">
						<span slot="title">基层安全生产</span>
					</el-menu-item>
					<el-menu-item index="">
						<span slot="title">集团安全生产</span>
					</el-menu-item>
				</el-menu>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {}
</script>

<style>
	.el-aside {
		background-color: #132243;
		overflow-x: hidden;
	}

	.nav-title {
		background-image: linear-gradient(to right, #038AFF, #56D7FF);
	}

	.nav-title h4 {
		margin: 0;
		color: white;
		text-align: center;
	}

	.nav-title img {
		width: 40px;
		vertical-align: middle;
	}

	.el-menu {
		border-right: none;
		background-color: #132243;
		text-align: center;
		color: #2480CA;
	}

	.el-menu-item {
		font-size: 14px;
		color: #99C3DD;
		padding: 0 20px;
		cursor: pointer;
		box-sizing: border-box;
	}

	.el-menu-item.is-active {
		background-image: linear-gradient(to right, #367AA9, #1B3C6F);
		color: white;
		border-left: 6px solid #5AD6FD;
	}

	.el-menu-item:focus,
	.el-menu-item:hover {
		outline: 0;
		background-color: #204779;
	}

	.el-submenu__title {
		color: #99C3DD;
	}

	.el-submenu__title:hover {
		outline: 0;
		background-color: #204779;
	}

	.el-submenu .el-menu-item {
		padding: 0px 0px 0px 0px !important;
		margin-left: -20px;
	}

	.el-submenu__title {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0px;
		padding-left: 0px !important;
	}

	.el-submenu__icon-arrow {
		position: absolute;
		top: 54%;
		right: 0px;
		margin-top: -7px;
		transition: transform .3s;
		font-size: 12px;
	}

	.el-submenu .el-menu {
		z-index: 99;
	}
</style>
